﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>TreeView - Status Icons</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/jquery.integralui.treeview.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-blue.css" />
    <script type="text/javascript" src="../../../external/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../../external/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="../../../external/jquery.ui.widget.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.integralui.widget.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.integralui.treeview.min.js"></script>
    <script type="text/javascript">
        var $tree = null;
        $(document).ready(function() {
            $tree = $('#treeview').treeview({
                showStatusIcons: true
                });
        });
         
        function toggleStatus(elem){
            $tree.treeview("option", "showStatusIcons", elem.checked);
        }
    </script>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content">
        <div class="feature">
	        <h2 class="feature-title">TreeView / Status Icons</h2>
	        <div class="feature-content">
                <div id="treeview" class="widget">
                    <ul>
                        <li><span class="icons question" data-element="statusIcon"></span><span>Books</span>
                            <ul>
                                <li><span>Art</span></li>
                                <li><span>Business</span>
                                    <ul>
                                        <li><span class="icons exclamation" data-element="statusIcon"></span><span>Economics</span></li>
                                        <li data-expanded=false><span>Investing</span>
                                             <ul>
                                                <li><span>Bonds</span></li>
                                                <li><span>Options</span></li>
                                                <li><span>Stocks</span></li>
                                            </ul>
                                        </li>
                                        <li><span>Management</span></li>
                                        <li><span>Small Business</span></li>
                                    </ul>
                                </li>
                                <li><span>Health</span></li>
                                <li><span>Literature</span></li>
                            </ul>
                        </li>
                        <li data-expanded=false><span>Electronics</span>
                            <ul>
                                <li><span>Camera</span></li>
                                <li><span>Cell Phones</span></li>
                                <li><span>Video Game Consoles</span></li>
                            </ul>
                        </li>
                        <li><span>Software</span>
                            <ul>
                                <li><span>Operating Systems</span></li>
                                <li><span class="icons down" data-element="statusIcon"></span><span>Network &amp; Servers</span></li>
                                <li><span>Security</span></li>
                            </ul>
                        </li>
                        <li data-expanded=false><span class="icons up" data-element="statusIcon"></span><span>Sports</span>
                             <ul>
                                <li><span>Baseball</span></li>
                                <li><span>Martial Arts</span></li>
                                <li><span>Running</span></li>
                                <li data-expanded=false><span>Tennis</span>
                                    <ul>
                                        <li><span>Accessories</span></li>
                                        <li><span>Balls</span></li>
                                        <li><span>Racquets</span></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
               </div>
                <div class="control-panel">
                    <form name="frm">
                        <label><input type="checkbox" name="checkStatusIcons" checked="checked" onclick="toggleStatus(this)" /> Show Status Icons</label><br />
                   </form>
                </div>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>In this sample you can show/hide status icons for items in TreeView widget. By clicking on check box on the right, you can change the built-in properties:
                        <ul class="feature-points">
                            <li><span style="color:#c60d0d">showStatusIcons</span> - determines whether an icon is shown to the far left side of the item space</li>
                        </ul>
                    </p>
                    <p><span class="initial-space"></span>There are two ways to apply a status icon to an item:
                        <ul class="feature-points">
                            <li>By using HTML to set the <span style="color:#c60d0d">data-element</span> attribute to <span style="color:#c60d0d">statusIcon</span>, or</li>
                            <li>By using JavaScript to set the <span style="color:#c60d0d">statusIcon</span> variable of item to some HTML code. You can use &lt;img&gt;, &lt;span&gt; or any other tag to add an image. Usually a &lt;span&gt; tag is used with image painted as background. For example:<br /><br />
                                item.statusIcon = "&lt;span class='icons question' data-element='statusIcon'&gt;&lt;/span&gt;";
                            </li>
                        </ul>
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
